<!-- $Id: example-ajax.html,v 1.2 2006/04/27 21:00:38 pat Exp $ -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ajax Tabber Example</title>

<link rel="stylesheet" href="example.css" TYPE="text/css" MEDIA="screen">
<link rel="stylesheet" href="example-print.css" TYPE="text/css" MEDIA="print">


<!--
Load prototype.js
You can get it at http://prototype.conio.net/
-->
<script src="http://www.barelyfitz.com/projects/tabber/effects/prototype.js" type="text/javascript"></script>

<script type="text/javascript">

/* Optional: Temporarily hide the "tabber" class so it does not "flash"
   on the page as plain HTML. After tabber runs, the class is changed
   to "tabberlive" and it will appear. */

document.write('<style type="text/css">.tabber{display:none;}<\/style>');

var tabberOptions = {

  'onClick': function(argsObj) {

    var t = argsObj.tabber; /* Tabber object */
    var i = argsObj.index; /* Which tab was clicked (0..n) */
    var div = this.tabs[i].div; /* The tab content div */

    /* Display a loading message */
    div.innerHTML = "<p>Loading...<\/p>";

    /* Fetch some html depending on which tab was clicked */
    //var url = 'example-ajax-' + i + '.html';
    var url = '../pageFrame.jsp';
    var pars = 'foo=bar&foo2=bar2'; /* just for example */
    var myAjax = new Ajax.Updater(div, url, {method:'get',parameters:pars});
  },

  'onLoad': function(argsObj) {
    /* Load the first tab */
    argsObj.index = 0;
    this.onClick(argsObj);
  },


}
</script>

<script type="text/javascript" src="tabber.js"></script>

<style type="text/css">
.tabberlive .tabbertab {
  height:200px;
}
</style>

<script type="text/javascript">


function addElement() {
	var ni = document.getElementById('tab2');
	  var numi = document.getElementById('theValue');
	  var num = (document.getElementById('theValue').value -1)+ 2;
	  numi.value = num;
	  var newdiv = document.createElement('div');
	  var divIdName = 'my'+num+'Div';
	  newdiv.setAttribute('class','tabbertab');
	  newdiv.setAttribute('id',divIdName);
	  newdiv.innerHTML = '<h2>Tab X</h2> <p>Tab X content.</p>';
	  ni.appendChild(newdiv);
	  
	}
function addDiv(parent, id, style, children) {
	  var r = document.createElement("div");
	  if(id)
	    r.id = id;
	  if(style)
	    for(var x in style)
	      r.style[x] = style[x];
	  if(children)
	    for(var i = 0; i < children.length; ++i)
	      r.appendChild(children);
	  parent.appendChild(r);
	  return r;
	}
	
//<div class="tabbertab">
//<h2>Tab 3</h2>
//<p>Tab 3 content.</p>
//</div>
	
function removeElement() {
	var elements=document.getElementById( 'myDiv' );
	var entries = document.getElementById( 'myDiv' ).getElementsByTagName('div');
	var chkBox;
	var temp;
	for( var i = entries.length-1; i > -1; i-- )
	 {
		chkBox=document.getElementById( entries[i].id ).getElementsByTagName("input");
		temp = document.getElementById(entries[i].id);
		if( chkBox[0].checked )
		{
			elements.removeChild( temp );
		}
	 }
		
	}
</script>
</head>
<body>

<h1>Ajax Tabber Example</h1>

<input type="hidden" value="0" id="theValue" />
<button type="button" onclick="addElement()">ADD</button>

<div class="tabber">

     <div class="tabbertab">
	  <h2>Tab 1</h2>
	  <div class="tabIframeWrapper">
	  	<iframe class="tabContent" 
	  			name="tabIframe2" src="pageFrame.html" 
	  			marginheight="8" marginwidth="8" frameborder="0">
	  	</iframe>
	  </div>
     </div>


     <div class="tabbertab">
	  <h2>Tab 2</h2>
     </div>


     <div class="tabbertab" id="tab2">
	  <h2>Tab 3</h2>
     </div>

</div>

</body>
</html>
